<template>
	<view class="container">
		<!-- 头部导航 -->
		<view class="header-bag">
			<image src="../../../static/img/Return@2x.png" class="back-btn" @click="goBack"></image>
			<text class="header-title">月度统计</text>
			<image src="../../../static/img/calendar@2x.png" class="calendar-icon" @click="showDatePicker"></image>
			<text class="current-date">{{ currentDateText }}</text>
		</view>
		
		<!-- 主要内容 -->
		<view class="content-wrapper">
			<!-- 区域选择 -->
			<view class="area-selector">
				<view class="selector-header" @click="toggleAreaSelector">
					<view class="selector-item">
						<text class="selector-text">运营区</text>
						<image class="selector-icon" src="../../../static/img/Selection@2x.png"></image>
					</view>
					<view class="selector-item active">
						<text class="selector-text">运营管理区</text>
						<image class="selector-icon" src="../../../static/img/drop-down menu@2x.png"></image>
					</view>
				</view>
				
				<view class="area-dropdown" v-if="showAreaDropdown">
					<scroll-view class="area-list" scroll-y>
						<view 
							class="area-item" 
							:class="{ selected: selectedArea.id === area.id }"
							v-for="area in areaList" 
							:key="area.id"
							@click="selectArea(area)"
						>
							<text class="area-name">{{ area.region_name }}</text>
							<image class="check-icon" src="../../../static/img/asdasd.png" v-if="selectedArea.id === area.id"></image>
						</view>
					</scroll-view>
				</view>
			</view>
			
			<!-- 统计数据 -->
			<view class="stats-container">
				<!-- 订单统计 -->
				<view class="stats-section">
					<text class="section-title">订单</text>
					<view class="stats-list">
						<view class="stats-item">
							<text class="stats-label">每月销售额</text>
							<text class="stats-value">{{ statsData.total_sales || 0 }}</text>
						</view>
						<view class="stats-item">
							<text class="stats-label">总单量</text>
							<text class="stats-value">{{ statsData.total_ords || 0 }}</text>
						</view>
						<view class="stats-item">
							<text class="stats-label">可分润总额</text>
							<text class="stats-value">{{ statsData.total_ords || 0 }}</text>
						</view>
						<view class="stats-item">
							<text class="stats-label">提成比例</text>
							<text class="stats-value">{{ statsData.order_rate || 0 }}</text>
						</view>
						<view class="stats-item">
							<text class="stats-label">分润金额</text>
							<text class="stats-value">{{ statsData.order_rebate || 0 }}</text>
						</view>
					</view>
				</view>
				
				<!-- 云主统计 -->
				<view class="stats-section">
					<text class="section-title">云主</text>
					<view class="stats-list">
						<view class="stats-item">
							<text class="stats-label">新增云主数</text>
							<text class="stats-value">{{ statsData.staff_num || 0 }}</text>
						</view>
						<view class="stats-item">
							<text class="stats-label">购买年数</text>
							<text class="stats-value">{{ statsData.staff_year_num || 0 }}</text>
						</view>
						<view class="stats-item">
							<text class="stats-label">提成比例</text>
							<text class="stats-value">{{ statsData.staff_rate || 0 }}</text>
						</view>
						<view class="stats-item">
							<text class="stats-label">提成金额</text>
							<text class="stats-value">{{ statsData.staff_income || 0 }}</text>
						</view>
					</view>
				</view>
				
				<!-- 合伙人统计 -->
				<view class="stats-section">
					<text class="section-title">合伙人</text>
					<view class="stats-list">
						<view class="stats-item">
							<text class="stats-label">新增合伙人数</text>
							<text class="stats-value">{{ statsData.ptn_num || 0 }}</text>
						</view>
						<view class="stats-item">
							<text class="stats-label">资质金份数</text>
							<text class="stats-value">{{ statsData.ptn_qual_num || 0 }}</text>
						</view>
						<view class="stats-item">
							<text class="stats-label">提成比例</text>
							<text class="stats-value">{{ statsData.ptn_rate || 0 }}</text>
						</view>
						<view class="stats-item">
							<text class="stats-label">提成金额</text>
							<text class="stats-value">{{ statsData.ptn_income || 0 }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 遮罩层 -->
		<view class="overlay" v-if="showAreaDropdown" @click="hideAreaSelector"></view>
		
		<!-- 日期选择器 -->
		<uni-datetime-picker 
			v-model="selectedDate" 
			type="date" 
			:clear-icon="false"
			format="yyyy-MM"
			@change="onDateChange"
			ref="datePicker"
		></uni-datetime-picker>
	</view>
</template>

<script>
	import { teamApi } from '../../../api/index.js'
	
	export default {
		data() {
			return {
				currentYear: new Date().getFullYear(),
				currentMonth: new Date().getMonth() + 1,
				selectedDate: '',
				showAreaDropdown: false,
				selectedArea: {},
				areaList: [],
				statsData: {}
			}
		},
		
		computed: {
			currentDateText() {
				return `${this.currentYear}年${this.currentMonth < 10 ? '0' + this.currentMonth : this.currentMonth}月`;
			}
		},
		
		onLoad() {
			this.initDate();
			this.loadData();
		},
		
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 初始化日期
			initDate() {
				const now = new Date();
				this.currentYear = now.getFullYear();
				this.currentMonth = now.getMonth() + 1;
				this.selectedDate = `${this.currentYear}-${this.currentMonth < 10 ? '0' + this.currentMonth : this.currentMonth}`;
			},
			
			// 显示日期选择器
			showDatePicker() {
				this.$refs.datePicker.show();
			},
			
			// 日期改变事件
			onDateChange(date) {
				if (date) {
					const [year, month] = date.split('-');
					this.currentYear = parseInt(year);
					this.currentMonth = parseInt(month);
					this.loadMonthlyStats();
				}
			},
			
			// 切换区域选择器
			toggleAreaSelector() {
				this.showAreaDropdown = !this.showAreaDropdown;
			},
			
			// 隐藏区域选择器
			hideAreaSelector() {
				this.showAreaDropdown = false;
			},
			
			// 选择区域
			selectArea(area) {
				this.selectedArea = area;
				this.hideAreaSelector();
				this.loadMonthlyStats();
			},
			
			// 加载数据
			async loadData() {
				await Promise.all([
					this.loadMonthlyStats(),
					this.loadAreaList()
				]);
			},
			
			// 加载月度统计数据
			async loadMonthlyStats() {
				try {
					uni.showLoading({
						title: '加载中...'
					});
					
					const result = await teamApi.getMonthlyStats({
						year: this.currentYear,
						month: this.currentMonth,
						area_id: this.selectedArea.id || ''
					});
					
					uni.hideLoading();
					
					if (result.r === 0) {
						this.statsData = result.data;
					} else {
						uni.showToast({
							title: '获取统计数据失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				}
			},
			
			// 加载区域列表
			async loadAreaList() {
				try {
					const result = await teamApi.getAreaList();
					
					if (result.r === 0) {
						this.areaList = result.data.area || [];
						// 设置默认选中第一个区域
						if (this.areaList.length > 0 && !this.selectedArea.id) {
							this.selectedArea = this.areaList[0];
						}
					} else {
						if (result.r === -1) {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							});
						}
					}
				} catch (error) {
					uni.showToast({
						title: '获取区域列表失败',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #fff;
		min-height: 100vh;
	}
	
	.header-bag {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 130rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		z-index: 999;
	}
	
	.back-btn {
		width: 40rpx;
		height: 64rpx;
		margin-left: 30rpx;
	}
	
	.header-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		color: #333333;
	}
	
	.calendar-icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 30rpx;
	}
	
	.current-date {
		position: absolute;
		right: 50%;
		margin-right: -110rpx;
		bottom: 30rpx;
		font-size: 36rpx;
		color: #FF5033;
	}
	
	.content-wrapper {
		margin-top: 130rpx;
		padding-top: 100rpx;
	}
	
	.area-selector {
		position: relative;
		background-color: #fff;
	}
	
	.selector-header {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}
	
	.selector-item {
		display: flex;
		align-items: center;
		margin-right: 40rpx;
	}
	
	.selector-item.active .selector-text {
		color: #FF5033;
	}
	
	.selector-text {
		font-size: 28rpx;
		color: #333;
		margin-right: 10rpx;
	}
	
	.selector-icon {
		width: 24rpx;
		height: 24rpx;
	}
	
	.area-dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: #fff;
		border: 2rpx solid #f0f0f0;
		z-index: 998;
	}
	
	.area-list {
		height: 718rpx;
		overflow: auto;
	}
	
	.area-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}
	
	.area-item.selected .area-name {
		color: #FF5033;
	}
	
	.area-name {
		font-size: 28rpx;
		color: #333;
	}
	
	.check-icon {
		width: 32rpx;
		height: 32rpx;
	}
	
	.stats-container {
		padding: 0 30rpx;
	}
	
	.stats-section {
		margin-bottom: 40rpx;
	}
	
	.section-title {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #f0f0f0;
	}
	
	.stats-list {
		background-color: #fff;
	}
	
	.stats-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #f8f8f8;
	}
	
	.stats-item:last-child {
		border-bottom: none;
	}
	
	.stats-label {
		font-size: 28rpx;
		color: #666;
	}
	
	.stats-value {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}
	
	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.2);
		z-index: 99;
	}
</style>